<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 800px;
            height: 20px;
            border-radius: 4px;
            margin: 100px auto;
            border: 2px solid green;
            position: relative;
        }

        #jinDuTiao {
            height: 20px;
            background: orange;
            border-radius: 4px;
            float: left;
        }

        #num {
            position: absolute;
            transform: translateY(-50%);
            top: 50%;
            left: 5px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div id="jinDuTiao" style="width: 0px;"></div>
        <span id="num">0%</span>
    </div>
    <script>
        // js中  有动画效果的都需要计时器，通过计时器改变进度条的宽度
        var timer = setInterval(function () {
            // 每执行一次定时器 进度条在原来的宽度基础上 + 10
            // 获取 原来的宽度  jinDuTiao.style.width 得到是 '0px' 只想0数字
            var style = parseInt(jinDuTiao.style.width);

            // 定义一个变量用原来的值 +每次增加的值
            var curStyle = style + 13;

            // 当进度条的宽度为 800的时候，已经是 最大值
            if (curStyle >= 800) {
                // 当值大于800 的时候，直接让curStyle的  等于800
                curStyle = 800;

                // 当执行这个条件时候，进度条已经达到100%
                // 定时器不需要在执行
                // 清除定时器   this指向的window
                clearInterval(timer)
            }
            // 在原来的基础上 + 10,在赋值给 元素的 宽度
            jinDuTiao.style.width = curStyle + 'px';

            // 给数字的元素添加left ，根据进度条的变化 而变化
            num.style.left = curStyle + 2 + 'px';
            // toFixed(2) 表示保留两位小数点
            num.innerHTML = ((curStyle / 800) * 100).toFixed(2) + '%';
        }, 100)
    </script>
</body>
</html>